﻿<!DOCTYPE html>
<html>
<head>
    <!-- basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- mobile metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- site metas -->
    <title>KingCity管理后台</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- site icon -->
    <!--<link rel="icon" href="images/fevicon.png" type="image/png" />-->
    <!-- bootstrap css 左侧下拉有更多-->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- site css -->
    <link rel="stylesheet" href="style.css" />
    <!-- responsive css 使边上的缩放-->
    <link rel="stylesheet" href="css/responsive.css" />

</head>
<body class="inner_page tables_page">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery.pagination.js"></script>

    <script>
        $(document).ready(function () {
            var html = '';
            $.ajax({
                type: 'get',
                url: "http://localhost:50364/api/Admin/Goods/productlist",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {

                        html += "<tr id='goods'>" +
                            "<td id='pro_id'>" + JSON.stringify(data[i]["pro_Id"]) + "</td><td>"
                            + "<img id='pro_pic'  style='height:100px;width:125px' src= " + JSON.stringify(data[i]["pro_Photo"]) + ">" + "</img>" + "</td><td>"
                            + JSON.stringify(data[i]["pro_Name"]) + "</td><td>"
                            + JSON.stringify(data[i]["pro_Type"]) + "</td><td>"
                            + JSON.stringify(data[i]["pro_Unit"]) + "</td><td>"
                            + JSON.stringify(data[i]["pro_Rank"]) + "</td><td>"
                            + JSON.stringify(data[i]["pro_Description"]) + "</td><td>" +
                            "<button type='button' id='update' class='btn cur - p btn - primary'>修改</button>" +
                            "<button type='button' class='btn cur - p btn - danger' id='delete' style='background-color:#DC3545;color:#FFFFFF'>删除</button>" +
                            "<button type='button' class='btn cur - p btn - danger' id='sku' style='background-color:#6C757D;color:#FFFFFF'>编辑SKU</button>" +
                            "</td>";

                    }
                    $(productlist).append(html);
                }
            });
        })

        $(document).on('click', '#update', function () {
            pro_id = $(this).closest('#goods').find('#pro_id').text();
            // alert($(this).closest('#goods').find('#pro_id').text());
            url = "./product_upload.html?pro_id=" + pro_id;
            window.location.href = url;

        })


        $(document).on('click', '#addGoods', function () {

            url = "./product_add.html";
            window.location.href = url;

        })

        $(document).on('click', '#sku', function () {
            pro_id = $(this).closest('#goods').find('#pro_id').text();
            url = "./SKU_management.html?pro_id=" + pro_id;
            window.location.href = url;


        })

        $(document).on('click', '#delete', function () {
            pro_id = $(this).closest('#goods').find('#pro_id').text();
            var url = "http://localhost:50364/api/Admin/Goods/DeleteGoods";
            $.ajax({


                //几个参数需要注意一下
                type: "get",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: url,
                data: { "pro_id": pro_id },
                success: function (result) {
                    alert("删除成功");
                    location.reload();
                },
                error: function () {
                    alert("异常！");
                }
            });


        })

        //模糊查询
        function uploadLikeResearch() {
            var html = '';
            var url = "http://localhost:50364/api/Admin/Goods/GoodsrFuzzy";
            $.ajax({
                //几个参数需要注意一下
                type: "get",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: url,
                data: $('#SearchText').serializeArray(),
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        html += "<tr id='goods'>" +
                            "<td id='pro_id' >" + JSON.stringify(data[i]["pro_Id"]) + "</td><td>"
                            + "<img id='pro_pic' src='./images/product/0b69420d-b157-4d64-9f45-4ad696bef541.jpg' style='height:100px;width:125px'>" + "</img>" + "</td><td>"
                            + JSON.stringify(data[i]["pro_Name"]) + "</td><td>"
                            + JSON.stringify(data[i]["pro_Type"]) + "</td><td>"
                            + JSON.stringify(data[i]["pro_Unit"]) + "</td><td>"
                            + JSON.stringify(data[i]["pro_Rank"]) + "</td><td>"
                            + JSON.stringify(data[i]["pro_Description"]) + "</td><td>" +
                            "<button type='button' id='update' class='btn cur - p btn - primary'>修改</button>" +
                            "<button type='button' class='btn cur - p btn - danger' id='delete' style='background-color:#DC3545;color:#FFFFFF'>删除</button>" +
                            "<button type='button' class='btn cur - p btn - danger' id='sku' style='background-color:#6C757D;color:#FFFFFF'>编辑SKU</button>" +
                            "</td>";
                        // alert(data[i]["pro_Photo"]);
                        $('#pro_pic').attr("src", "./images/product/0b69420d-b157-4d64-9f45-4ad696bef541.jpg");
                    }


                    $(productlist).empty("");
                    $(productlist).append(html);
                },
                error: function () {
                    alert("异常！");
                }
            });
        }

    </script>

    <div class="full_container">
        <div class="inner_container">
            <!-- Sidebar 侧边栏 -->
            <nav id="sidebar">
                <div class="sidebar_blog_2">
                    <h4>商城管理后台</h4>
                    <ul class="list-unstyled components">
                        <li class="active">
                            <a href="#dashboard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-dashboard yellow_color"></i> <span>商品管理</span></a>
                            <ul class="collapse list-unstyled" id="dashboard">
                                <li>
                                    <a href="">> <span>商品管理</span></a>
                                </li>
                                <li>
                                    <a href="">> <span>产品统计</span></a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#element" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-object-group blue2_color"></i> <span>交易管理</span></a>
                            <ul class="collapse list-unstyled" id="element">
                                <li><a href="order_list.html">> <span>订单列表</span></a></li>
                                <li><a href="">> <span>发货管理</span></a></li>

                            </ul>
                        </li>
                        <li><a href="widgets.html"><i class="fa fa-map purple_color2"></i> <span>优惠券管理</span></a></li>
                        <li><a href="widgets.html"><i class="fa fa-diamond orange_color"></i> <span>用户管理</span></a></li>
                        <li>
                            <a href=""><i class="fa fa-clone yellow_color"></i> <span>退出</span></a>
                        </li>
                    </ul>
                </div>
            </nav>
            <!-- end sidebar -->
            <!-- right content -->
            <div id="content">
                <!-- topbar 上边框 -->
                <div class="topbar">
                    <nav class="navbar navbar-expand-lg navbar-light">
                        <div class="full">
                            <button type="button" id="sidebarCollapse" class="sidebar_toggle"><i class="fa fa-bars"></i></button>

                            <div class="right_topbar">
                                <div class="icon_info">
                                    <ul>
                                        <li><a href="#"><i class="fa fa-bell-o"></i><span class="badge"></span></a></li>
                                        <li><a href="#"><i class="fa fa-sign-out"></i><span class="badge"></span></a></li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
                <!-- end topbar -->
                <!-- dashboard inner -->
                <div class="midde_cont">
                    <div class="container-fluid">
                        <div class="row column_title">
                            <div class="col-md-12">
                                <div class="page_title">
                                    <h2>商品管理  <button type="button" class="btn cur-p btn-secondary" id="addGoods">添加商品</button></h2>
                                    <div style="float: right;width: 300px;height: 65px;padding-top: 30px;border-bottom-width: 5px;padding-bottom: 5px;">
                                        <input type="text" name="searchText" id="SearchText" placeholder="请输入商品名称:" />
                                        <button onclick="uploadLikeResearch()" style="float:right">查询</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- row 中间填一些表格或者商品行-->
                        <div class="Pagination" id="pagination">
                            <table class="gallery table table_list table_striped table-bordered " id="tableList" style=" text-align: center; ">
                                <thead>
                                    <tr>
                                        <!--<th width="50px"><label class="checkbox relative"><input type="checkbox" class="ace" name="checkbox"><span class="lbl"></span></label></th>-->
                                        <th width="160">Pro_Id</th>
                                        <th width="160" id="list" name="list">图片</th>
                                        <th width="160">产品名称</th>
                                        <th width="160">分类</th>
                                        <th width="160">单位</th>
                                        <th width="160">等级</th>
                                        <th width="300">描述</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="productlist">
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
                <!-- end dashboard inner -->
            </div>
        </div>
    </div>
    <!-- jQuery -->





</body>
</html>